<template>
    <div class="app-container">
        <el-card class="operate-container" shadow="never">
            <div>
                <el-button v-if="!isOneS" size="mini" class="btn-add" @click="handleSort()" >排序</el-button>
                <el-button v-if="isOneS" size="mini" class="btn-add" @click="handleSortC()" >取消</el-button>
                <el-button style="background-color: #4099ef;color: #fff;" v-if="isOneS" size="mini" class="btn-add" @click="handleSortS()" >提交</el-button>
                <span v-if="query">
                    <span style="margin-left: 20px;">活动名称：</span>
                    <span>{{ query.name }}</span>
                </span>
            </div>
            <div style="display: flex;">
                <el-button size="mini" class="btn-add" @click="createAdd()" >添加活动</el-button>
            </div>
        </el-card>
        <div class="table-container">
            <el-table ref="adminTable"
                    :data="list"
                    row-key="code"
                    style="width: 100%;"
                    v-loading="listLoading" border>
                <el-table-column label="拖拽排序" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-s-operation"></i>
                    </template>
                </el-table-column>
                <el-table-column label="活动名称（简）" align="center">
                    <template slot-scope="scope">{{scope.row.zhCnTitle }}</template>
                </el-table-column>
                <el-table-column label="活动名称（繁）" align="center">
                    <template slot-scope="scope">{{scope.row.zhHkTitle }}</template>
                </el-table-column>
                <el-table-column label="内容（简）" align="center">
                    <template slot-scope="scope">{{ JSON.parse(scope.row.zhCnContentObj)['content'] }}</template>
                </el-table-column>
                <el-table-column label="内容（繁）" align="center">
                    <template slot-scope="scope">{{ JSON.parse(scope.row.zhHkContentObj)['content'] }}</template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini"
                                    type="text"
                                    @click="handleUpdate(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button size="mini"
                                    type="text"
                                    @click="handleShow(scope.$index, scope.row)">{{ scope.row.status ? '停用' : '启用' }}
                        </el-button>
                        <el-button size="mini"
                                    type="text"
                                    @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
            :title="'添加/编辑活动'"
            :visible.sync="visible"
            width="55%">
            <el-form :model="activityResource"
                    ref="thirdForm"
                    :rules="rules"
                    label-width="200px" size="small">
                <el-form-item label="分类名称（简）：" prop="zhCnTitle">
                    <el-input v-model="activityResource.zhCnTitle" class="input-width" placeholder="请输入分类名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="分类名称（繁）：" prop="zhHkTitle">
                    <el-input v-model="activityResource.zhHkTitle" class="input-width" placeholder="请输入分类名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="内容（简）：" prop="zhCnContent">
                    <el-input v-model="activityResource.zhCnContent" type="textarea" class="input-width" placeholder="请输入内容" clearable></el-input>
                </el-form-item>
                <el-form-item label="内容（繁）：" prop="zhHkContent">
                    <el-input v-model="activityResource.zhHkContent" type="textarea" class="input-width" placeholder="请输入内容" clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogConfirm('thirdForm')" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { noticeList, noticeDelete, noticeAdd, noticeSort, noticeUpdate, noticeEnabled, fetchAllResourceList } from '@/api/app';
import Sortable from 'sortablejs';
const defaultR = {
    code: null,
    bizId: null,
    type: null,
    zhHkTitle: null,
    zhCnTitle: null,
    zhHkContent: null,
    zhCnContent: null
};
export default{
    data() {
        return {
            list: [],
            listLoading: false,
            visible: false,
            activityResource: Object.assign({}, defaultR),
            rules: {
                zhCnTitle: [
                    { required: true, message: '请填写分类' }
                ],
                zhHkTitle: [
                    { required: true, message: '请填写分类' }
                ],
                zhCnContent: [
                    { required: true, message: '请填写内容' }
                ],
                zhHkContent: [
                    { required: true, message: '请填写内容' }
                ],
            },
            isEdit: false,
            isOneS: false,
            sortShowOne: null,
            query: null,
            btnMenu: {
                edit: true,
                delete: true,
            },
        }
    },
    created() {
        const menu = JSON.parse(localStorage.getItem('listMenu'));
        const item = menu.filter(item => item.title === '票务须知管理')[0];
        fetchAllResourceList({menuId: item.id }).then(res => {
            res.data.forEach(dom => {
            if (dom.component === '' && dom.name === '后台角色管理') {
                this.btnMenu.edit = false;
            }
            if (dom.component === '' && dom.name === '后台角色删除') {
                this.btnMenu.delete = false;
            }
            });
        });
        if (this.$route.query.name) {
            this.query = this.$route.query;
        } else {
            this.query = null;
        }
        this.getList();
    },
    mounted() {
        // this.$nextTick(() => {
        //     const el = this.$el.querySelector('.el-table__body-wrapper tbody');
        //     Sortable.create(el, {
        //         onEnd: (event) => {
        //             const { oldIndex, newIndex } = event;
        //             this.rowDrop(oldIndex, newIndex);
        //         }
        //     })
        // });
    },
    methods: {
        rowDrop(oldIndex, newIndex) {
            const movedItem = this.list.splice(oldIndex, 1)[0];
            this.list.splice(newIndex, 0, movedItem);
            // this.sortList();
        },
        sortList() {
            const code = [];
            this.list.forEach(item => {
                code.push(item.code);
            });
            noticeSort(code).then(res => {
                this.$message({
                    type: 'success',
                    message: '排序成功!'
                });
                this.isOneS = false;
                this.sortShowOne.destroy();
                this.getList();
            })
        },
        handleSort() {
            const el = this.$el.querySelector('.el-table__body-wrapper tbody');
            this.sortShowOne = Sortable.create(el, {
                onEnd: (event) => {
                    const { oldIndex, newIndex } = event;
                    this.rowDrop(oldIndex, newIndex);
                }
            })
            this.isOneS = true;
        },
        handleSortC() {
            this.sortShowOne.destroy();
            this.isOneS = false;
            this.getList();
        },
        handleSortS() {
            this.sortList();
        },
        getList() {
            noticeList({type: this.query ? 5: null, bizId: this.query ? this.query.id: null}).then(res => {
                this.list = res.data.records;
            });
        },
        createAdd() {
            this.isEdit = false;
            this.visible = true;
            this.activityResource = Object.assign({}, defaultR);
        },
        handleUpdate(index, row) {
            this.activityResource = row;
            this.isEdit = true;
            this.visible = true;
        },
        handleShow(index, row) {
            noticeEnabled({code: row.code}).then(res => {
                this.getList();
            });
        },
        handleDelete(index, row) {
            this.$confirm('是否要删除该活动?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                noticeDelete({code: row.code}).then(response => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList();
                });
            });
        },
        dialogConfirm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.isEdit) {
                        noticeUpdate(this.activityResource).then(res => {
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.visible = false;
                            this.getList();
                        });
                    } else {
                        noticeAdd(this.activityResource).then(res => {
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                            this.visible = false;
                            this.getList();
                        })
                    }
                } else {
                    return false;
                }
            });
        },

    },
}
</script>

<style lang="scss" scoped>
.input-width {
    width: 360px;
}
</style>
